<template>
	<view>
		<view class="header">
			<u-navbar title="填写抢票信息" back-icon-size='44' :background="background" title-color="#FFFFFF" :border-bottom='false'
			 back-icon-color='#071D42'>
				<view slot='right' style="padding-right: 32rpx;color:#FFFFFF;">
					预定须知
				</view>
			</u-navbar>
			<view class="station">
				<view class="start">
					深圳东
				</view>
				<image src="../../../static/imgs/airTo.png" mode=""></image>
				<view class="end">
					常德
				</view>
			</view>
		</view>
		<view class="container">
			<view class="trainqp" :style="{height:isDwon?'auto':'100rpx'}">
				<view class="head">
					<image src="../../../static/imgs/fonttrain.png" mode=""></image>
					<view class="text">
						出票更容易
					</view>
					<view class="detail" @click="isDwon =true" v-if="!isDwon">
						查看详情 <u-icon name="arrow-down" color="#999999" size="24"></u-icon>
					</view>
					<view class="detail" @click="isDwon =false" v-else>
						收起 <u-icon name="arrow-up" color="#999999" size="24"></u-icon>
					</view>
				</view>
				<view class="trainqp-ul">
					<view class="trainqp-li">
						<image src="../../../static/imgs/hbgp.png" mode=""></image>
						<view class="tit">
							<view class="title">
								候补购票通道
							</view>
							<view class="other">
								建议立即开启，大幅提升抢票成功率
							</view>
						</view>
						<view class="btns">
							去候补
						</view>
					</view>
					<view class="trainqp-li">
						<image src="../../../static/imgs/ypjk.png" mode=""></image>
						<view class="tit">
							<view class="title">
								余票监控通道
							</view>
							<view class="other">
								实时查余票线路，一旦有票立即秒杀
							</view>
						</view>
						<view class="tips">
							<u-icon name="checkmark-circle" color="#63C751" size="24"></u-icon>已开启
						</view>
					</view>
				</view>
			</view>
			<view class="trainWay">
				<view class="title">
					<view class="tip1">建议多选方案</view>
					<view class="tip2">可极大提升抢票成功率</view>
				</view>
				<view class="trainWay-li">
					<view class="lable">
						出发日期
					</view>
					<view class="content">
						02月10日
					</view>
					<view class="more" @click="showCalendar =true">
						<text>多选</text>
						<u-icon name="arrow-right" color="#3587F7" size="24"></u-icon>
					</view>
				</view>
				<view class="trainWay-li">
					<view class="lable">
						抢票车次
					</view>
					<view class="content">
						K502
					</view>
					<view class="more" @click="navTo('./trainChoose')">
						<text>多选</text>
						<u-icon name="arrow-right" color="#3587F7" size="24"></u-icon>
					</view>
				</view>
				<view class="trainWay-li">
					<view class="lable">
						抢票坐席
					</view>
					<view class="content">
						硬座
					</view>
					<view class="more" @click="showPop =true">
						<text>多选</text>
						<u-icon name="arrow-right" color="#3587F7" size="24"></u-icon>
					</view>
				</view>
			</view>

			<view class="trainBox">
				<view class="tit">
					<view class="text1">
						接收无座 <text class="tips">成功率极高</text>
					</view>
					<view class="text2">
						大数据显示，发车前会放出无票坐席。
					</view>
				</view>
				<view class="switch">
					<u-switch v-model="checked"></u-switch>
				</view>
			</view>
			
			<view class="passer">
				<view class="passer-ul">
					<view class="passer-li">
						<view class="del">
							<u-icon name="minus-circle" color="#FB4F4B" size="36"></u-icon>
						</view>
						<view class="peoInfo">
							<view class="name">
								<view class="name-tit">
									小桌子
								</view>
								<view class="type">
									成人票
								</view>
							</view>
							<view class="idnum">
								二代身份证 123568 ******** 2356
							</view>
						</view>
					</view>
				</view>
				<view class="addpasser" @click="navTo('./selPass')">
					<u-icon name="plus-circle" color="#3587F7" size="36"></u-icon>添加乘客(成人、学生、儿童）
				</view>
			</view>
			
			<view class="mobile">
				<text class="text1">手机号码</text>
				<text class="text2">+86</text>
				<u-input v-model="value" type="text" />
				<image src="../../../static/imgs/txl.png" mode=""></image>
			</view>

			<view class="endtime">
				<view class="title">
					截止时间
				</view>
				<view class="timeBox">
					<view class="timeItem active">
						发车前25分钟
					</view>
					<view class="timeItem">
						发车前1小时
					</view>
					<view class="timeItem">
						发车前2小时
					</view>
					<view class="timeItem">
						发车前3小时
					</view>
				</view>
				<view class="tip">
					截止发车前25分钟将一直为您抢票，您可根据出行时间安排， 选择合适的抢票截止时间
				</view>
			</view>
		</view>

		<view class="next">
			<view class="text">
				预估成功率: <text>中等</text>
			</view>
			<view class="nextBtn">
				下一步
			</view>
		</view>

		<u-calendar v-model="showCalendar" :change-year='false' mode="range" @change="change"></u-calendar>

		<u-popup v-model="showPop" mode="bottom" border-radius="16">
			<view class="popBox">
				<view class="title">
					<view class="close" @click="showPop=false">
						<u-icon name="close" color="#666666" size="32"></u-icon>
					</view>
					<view class="tit">
						选择坐席（建议多选）
					</view>
					<view class="comfirm">
						确定
					</view>
				</view>
				<view class="tips">
					<view class="tips1">
						<text class="dian"></text><text>多选坐席，抢票成功率更高</text>
					</view>
					<view class="tips1">
						<text class="dian"></text><text>选择后暂收取最高票价，抢票成功后按实际车票价格退还差价</text>
					</view>
				</view>
				<view class="checkbox">
					<view class="checkbox-li">
						<view class="type">
							硬座
						</view>
						<view class="price">
							¥280.5
						</view>
						<view class="check">
							<u-checkbox v-model="checked"></u-checkbox>
						</view>
					</view>
					<view class="checkbox-li">
						<view class="type">
							硬座
						</view>
						<view class="price">
							¥280.5
						</view>
						<view class="check">
							<u-checkbox v-model="checked"></u-checkbox>
						</view>
					</view>
					<view class="checkbox-li">
						<view class="type">
							硬座
						</view>
						<view class="price">
							¥280.5
						</view>
						<view class="check">
							<u-checkbox v-model="checked"></u-checkbox>
						</view>
					</view>
					<view class="checkbox-li">
						<view class="type">
							硬座
						</view>
						<view class="price">
							¥280.5
						</view>
						<view class="check">
							<u-checkbox v-model="checked"></u-checkbox>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				showCalendar: false,
				value: '135 **** 5698',
				background: {
					backgroundColor: '#3DA4FE'
				},
				isDwon: false,
				checked: false
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 460rpx;
		background: linear-gradient(180deg, #3DA4FE 0%, #3587F7 72%, rgba(45, 123, 247, 0) 100%);

		.station {
			display: flex;
			align-items: center;
			padding: 44rpx 28rpx 0;
			justify-content: space-between;

			image {
				width: 120rpx;
				height: 10rpx;
			}

			.start,
			.end {
				font-size: 40rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.container {
		padding: 0 28rpx 128rpx;
		margin-top: -280rpx;

		.trainqp {
			margin: 44rpx auto 0;
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx;
			overflow: hidden;

			.head {
				display: flex;
				align-items: center;
				height: 100rpx;
				width: 100%;

				image {
					width: 186rpx;
					height: 30rpx;
				}

				.text {
					margin-left: 10rpx;
					width: 136rpx;
					height: 32rpx;
					background: #F4792F;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: Segoe UI;
					font-weight: 400;
					line-height: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.detail {
					margin-left: auto;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
				}
			}

			.trainqp-ul {
				.trainqp-li {
					height: 120rpx;
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.tit {
						margin-left: 12rpx;

						.title {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: bold;
							color: #333333;
						}

						.other {
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
						}
					}

					.btns {
						margin-left: auto;
						width: 124rpx;
						height: 52rpx;
						background: linear-gradient(90deg, #FEA837 0%, #FF7700 100%);
						border-radius: 8rpx;
						text-align: center;
						line-height: 52rpx;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #FFFFFF;
					}

					.tips {
						margin-left: auto;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #63C751;
					}
				}
			}
		}

		.trainWay {
			width: 100%;
			height: 374rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 20rpx;

			.title {
				.tip1 {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333333;
				}

				.tip2 {
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #F57426;
				}
			}

			.trainWay-li {
				height: 88rpx;
				display: flex;
				align-items: center;

				.lable {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.content {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333333;
					margin-left: 60rpx;
				}

				.more {
					margin-left: auto;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
				}
			}
		}

		.trainBox {
			width: 694rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.switch {
				margin-left: auto;
			}

			.tit {
				.text1 {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333333;

					.tips {
						margin-left: 6rpx;
						display: inline-block;
						width: 136rpx;
						height: 28rpx;
						background: #F4792F;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 28rpx;
					}
				}

				.text2 {
					margin-top: 12rpx;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #F57426;
				}
			}
		}
		
		.passer {
			margin-top: 20rpx;
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			.passer-ul {
				padding: 0 20rpx;
				.passer-li {
					width: 100%;
					height: 140rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #F2F2F7;
					.peoInfo {
						margin-left: 12rpx;
						.name {
							display: flex;
							align-items: center;
							.name-tit {
								font-size: 32rpx;
								font-family: Segoe UI;
								font-weight: bold;
								color: #333333;
							}
							.type {
								margin-left: 10rpx;
								width: fit-content;
								height: 38rpx;
								background: #FFFFFF;
								border: 2rpx solid #D0D2D5;
								border-radius: 4rpx;
								font-size: 20rpx;
								font-family: Segoe UI;
								font-weight: 400;
								color: #999999;
								text-align: center;
								padding: 0 10rpx;
							}
						}
						.idnum {
							margin-top: 6rpx;
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
			.addpasser {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
			}
		}


		.mobile {
			margin-top: 20rpx;
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 16rpx;
			}

			.text1 {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.text2 {
				margin-left: 26rpx;
				margin-right: 16rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}
		}

		.endtime {
			margin-top: 20rpx;
			width: 694rpx;
			height: 284rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;

			.title {
				font-size: 36rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.timeBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 18rpx;

				.timeItem {
					width: 156rpx;
					height: 56rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					border: 2rpx solid #DFDEE2;
					color: #666666;
					text-align: center;
					line-height: 56rpx;
				}

				& .active {
					border: 2rpx solid #3587F7;
					color: #3587F7;
				}
			}

			.tip {
				padding: 18rpx;
				margin-top: 16rpx;
				width: 658rpx;
				height: 100rpx;
				background: #FEF7EF;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #F57426;
			}
		}
	}

	.next {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;

		.text {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;

			text {
				margin-left: 12rpx;
				font-size: 40rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #F57426;
			}
		}

		.nextBtn {
			width: 280rpx;
			height: 76rpx;
			background: linear-gradient(180deg, #FEA837 0%, #FF7700 100%);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
		}
	}

	.popBox {
		padding: 0 28rpx;

		.title {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tit {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.comfirm {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
			}
		}

		.tips {
			width: 694rpx;
			height: 132rpx;
			background: #FEF7EF;
			border-radius: 8rpx;

			.tips1 {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #F57426;
				display: flex;
				align-items: center;
				padding-left: 16rpx;
				line-height: 62rpx;

				.dian {
					margin-right: 6rpx;
					display: inline-block;
					width: 8rpx;
					height: 8rpx;
					background: #F57426;
					border-radius: 50%;
				}
			}
		}

		.checkbox {
			margin-top: 16rpx;
			padding-bottom: 10rpx;

			.checkbox-li {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F2F2F7;

				&:nth-child(4) {
					border-bottom: none
				}

				.type {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333333;
				}

				.price {
					font-size: 28rpx;
					font-family: Arial;
					font-weight: 400;
					color: #F57426;
				}
			}
		}
	}
</style>
